<template>
    <div>
        <input type="text" placeholder="请输入心愿" v-model="Value">
        <div>
            <ul>
                <li :style='{background:item.background}' @click="getColor(item.background,i)"
                 v-for="(item,i) in list" :key="i" ref="color"
                  :class="isactive == i ? 'addclass' : ''" >
                   
                </li>
            </ul>
        </div>
        <input type="submit" @click="addWish" v-model="wish" :disabled="disabled">
        <div id="wish-box">
            <ul>
                <li v-for="(item,i) in wishList" :key="item.id"
                 :style="{background:item.background,
                 left:item.left,top:item.top}" 
                 @click="edit(item)"
                 @touchstart='touchStart($event,i)'
                 @touchmove='touchMove($event,i)' 
                 @touchend='touchEnd($event,i)'>
                    {{item.content}}
                    <span @click.stop="del(i)">X</span>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Wishing',
    data() {
        return {
            list:[
                {'background':'sandybrown'},
                {'background':'aqua'},
                {'background':'darkmagenta'},
                {'background':'chartreuse'},
                {'background':'teal'},
            ],
            isactive:-1,
            Value:'',
            disabled:true,
            wish:'再想想',
            selectColor:'',
            // 收集愿望的数组
            wishList:[],
            startX:0,
            startY:0,
            // 记录是不是修改状态
            isExit:false,
            // 记录修改的item
            exitItem:''
        };
    },
    created() {
         this.$loading.show("登录成功");
        setTimeout(() => {
          this.$loading.hide();
        }, 1000);
        this.wishList = JSON.parse(localStorage.getItem('wishList'))
    },
    methods: {
        // 获取点击的颜色
        getColor(color,i) {
            this.selectColor = color
            this.isactive = i
        },
        // 许愿
        addWish() {
            // 如果事修改
           if(this.isExit){
               this.exitItem.content = this.Value
               console.log(this.isactive);
               this.exitItem.background = this.list[this.isactive].background
           } else {
            //    不是修改就事添加
                var obj = {
                background:this.selectColor,
                content:this.Value,
                top:parseInt(Math.random()*275)+'px',
                left:parseInt(Math.random()*275)+'px'
            }
            this.wishList.push(obj)
            if(this.wishList.length>5){
                this.wishList.shift()
            }
           }
            this.isactive = -1
            this.Value = ''
            localStorage.setItem('wishList',JSON.stringify(this.wishList))
        },
        // 删除
        del(i) {
            this.wishList.splice(i,1)
            localStorage.setItem('wishList',JSON.stringify(this.wishList))

        },
        // 拖拽  开始位置
        touchStart(e,i) {
            // 开始位置    点击元素的位置  -  元素的left值
            this.startX = e.touches[0].pageX - parseFloat(this.wishList[i].left)
            this.startY = e.touches[0].pageY - parseFloat(this.wishList[i].top)
        },
        // 移动位置
        touchMove(e,i) {
            this.wishList[i].left = e.touches[0].pageX - this.startX + 'px'
            this.wishList[i].top = e.touches[0].pageY - this.startY + 'px'
        },
        // 离开
        touchEnd() {},
        // 点击元素编辑内容
        edit(item) {
            // 记录修改的元素
            this.exitItem = item
            // 点击元素变成编辑状态
            this.isExit = true
            this.Value =item.content
            this.list.forEach((el,i) => {
                if(el.background == item.background ){
                    this.isactive = i
                }
            });
        },
        fun() {
             if(this.isExit){
                if(this.Value != ''&& this.isactive !=-1){
                this.disabled = false
                this.wish = '修改'
            } else {
                this.disabled = true
                this.wish = '666'
            }
           } else {
                if(this.Value != ''&& this.isactive !=-1){
                this.disabled = false
                this.wish = '许愿'
            } else {
                this.disabled = true
                this.wish = '666'
            }
           }
        }

    },
    watch:{
        Value() {
          this.fun()
        },
        isactive() {
          this.fun()
        }
    },
    //组件挂载
    components: {},
    //计算属性
    computed: {},
    //过滤器
    filters: {},
};
</script>

<style lang="scss" scoped>
input{
    width: 300px;
    height: 40px;
    display: block;
    padding-left: 20px;
    margin: 10px auto;

}
ul{
    width: 100%;
    height: 50px;
    display: flex;
    list-style: none;
    margin-bottom: 20px;
    li{
        width: 20%;
        height: 50px;
        border-radius: 50%;
        margin: 10px;
    }
}
.addclass{
    border: 2px solid red;
}

input[type=submit]{
    background-color: turquoise;
    border: none;
}
input[disabled]{
    background-color: #ccc;
}
#wish-box{
    position: relative;
    height: 400px;
    li{
        position: absolute;
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        span{
            width: 20px;
            height: 20px;
            background-color: #ccc;
            position: absolute;
            top:0;
            right:0;
            text-align: center;
            line-height: 20px;
        }
    }
}
</style>
